<!-- eslint-disable max-len -->
<template>
  <div class="h100 systemRolePage">
    <div class="systemRolePageRow">
      <div class="left">
        <div class="roleListBox">
          <role-ul-list @selectedRoleNew="selectedRoleNew" ref="roleUlList" ></role-ul-list>
        </div>
        <div class="createRoleBtn">
          <a-divider class="topBorder"/>
          <auth-button :auth="managePerms.role.add" @click="handleAdd">
            <i class="iconfont icon-xinjian"></i>
            {{ $t('role') }}
          </auth-button>
        </div>
      </div>
      <div class="middle">
        <div class="curRoleNodeWrap">
          <cur-role-node ref="curRoleNode" :selectedRoleFromU1List="selectedRoleFromU1List" action="edit" :defaultCheckStrictly="false" @changeConfirmBtn="handleDisableConfirm"></cur-role-node>
        </div>
        <div class="editRoleBtn">
          <auth-button :auth="managePerms.role.edit" @click="handleEdit" :disabled="disableBtn" style="margin-right:24px !important;">
            {{ $t('sure') }}
          </auth-button>
          <auth-button type="danger" :auth="managePerms.role.delete" @click="deleteRole" :disabled="savingEditData">
            {{ $t('delete') }}
          </auth-button>
        </div>
      </div>
      <div class="right">
        <cur-role-user-list :selectedRoleFromU1List="selectedRoleFromU1List"></cur-role-user-list>
      </div>
    </div>
  </div>
</template>
<script>
import RoleUlList from './components/RoleUlList.vue'
import CurRoleUserList from './components/CurRoleUserList.vue'
import CurRoleNode from './components/CurRoleNode.vue'
import { mapState } from 'vuex'
import { minxinDrawerUse } from '@/utils/mixin'
import AuthButton from '@/components/AuthButton'
import { managePerms } from '@/config/permission/index'
export default {
  mixins: [minxinDrawerUse],
  components: {
    RoleUlList,
    CurRoleUserList,
    CurRoleNode,
    AuthButton
  },
  computed: {
    ...mapState({
      selectedRole: (state) => state.role.selectedRole
    })
  },
  data () {
    return {
      managePerms,
      editFormComp: 'CurRoleNode',
      formTitle: this.$t('new') + this.$t('role'),
      savingEditData: false,
      deletingRole: false,
      selectedRoleFromU1List:{id:'role_admin_id'},
      disableBtn: true
    }
  },
  methods: {
    // 加载权限树完成或用户选择了权限 true
    // 权限树勾选权限为空 false
    handleDisableConfirm (value) {
      this.disableBtn = value
    },
    handleOk () {
      this.$refs.editForm.$refs.formComp.validate((valid) => {
        if (!valid) {
          return
        }
        const method = 'save' + this.editFormComp + 'Data'
        this[method](this.$refs.editForm.$data.formData)
      })
    },
    // 添加角色数据
    saveCurRoleNodeData (formData) {
      return this.$store.dispatch('addRoleData', formData)
    },
    // 编辑角色数据
    handleEdit () {
      this.$refs.curRoleNode.getFormData().then(data => {
        this.savingEditData = true
        this.$store.dispatch('editRoleData', data).then(() => {
          this.$message.success(this.$t('success'))
          this.$refs.curRoleNode.initPageData(
            { checkedKeys: this.$refs.curRoleNode.$data.checkedKeys, notChangeFormData: true }
          )
          this.$store.commit('SET_SELECTED_ROLE', { ...this.$refs.curRoleNode.$data.formData })
        }).finally(() => {
          this.savingEditData = false
        })
      })
    },
    // 添加角色
    handleAdd () {
      const _this = this
      const buttons = this.getRightDrawerFooterButtons({
        key: managePerms.role.add,
        method: 'saveCurRoleNodeData',
        callback () {
          _this.refreshRoleUlList()
        }
      })
      const vars = { defaultCheckStrictly:false, time: Date.now(), action: 'add' }
      this.showRightDrawer(CurRoleNode, this.$t('buildRole'), buttons, 'huge', vars)
    },
    // 删除角色
    deleteRole () {
      const vm = this
      this.$confirm({
        title: vm.$t('systemTip'),
        content: vm.$t('deleteConfirmNotice').replace('__CONTENT__', '[' + vm.selectedRole.name + ']'),
        onOk () {
          vm.deletingRole = true
          vm.$store.dispatch('deleteRoleData', { ids: [vm.selectedRole.id] }).then(() => {
            vm.$store.commit('SET_SELECTED_ROLE', null)
            vm.$message.success(vm.$t('successfullyOperation'))
          }).finally(() => {
            vm.deletingRole = false
          })
        },
        onCancel () {
        }
      })
    },
    refreshRoleUlList () {
      this.$refs.roleUlList.getData()
    },
    selectedRoleNew(data){
      this.selectedRoleFromU1List = data
    }
  }
}
</script>

<style scoped lang="less">
.systemRolePage {
  .systemRolePageRow {
    display: flex;
    height: 100%;
  > .ant-row {
    height: 100%;
  }
  > .ant-col {
    height: 100%;
    overflow: auto;
  }
  .left {
    border-right: 1px solid @borderColor;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex:0 0 180px;
    .roleListBox {
      flex:1 0 0;
      overflow: auto;
    }
    .createRoleBtn {
      width: 100%;
      padding:0 24px 10px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .topBorder {
        margin-bottom: 10px;
        background-color:#f2f2f2;
      }
      .ant-btn {
        width: 100%;
      }
    }
  }
  .middle {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f2f2f2;
    overflow: auto;
     min-width: 640px;
    .curRoleNodeWrap {
      flex:1 0 0;
    }
    .editRoleBtn {
      padding:10px 24px;
    }
  }
  .right {

    flex:0 0 360px;
  }
}
}
</style>
<style lang="less">
.systemRolePage  {
  .newSideWarp {
    padding-bottom: 20px;
    .content {
      display: flex;
      flex-direction: column;
    }
    .curRoleNodeBox {
      padding:0 !important;
    }
    .btnButtonBox {
      margin-top:10px;
    }
  }
}
</style>
<style lang="less">
.createRoleBtn {
  .disabledAuthButtonWrap {
    width: 100%;
  }
}
</style>
